<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LayUI 代码预览组件 Demo</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
</head>
<body>
    <div class="layui-container" style="padding: 20px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h2>LayUI 代码预览组件 Demo</h2>
                    </div>
                    <div class="layui-card-body">
                        
                        <!-- 代码预览组件 -->
                        <div class="code-preview-container">
                            <div class="code-preview-header">
                                <div class="code-info">
                                    <span class="code-title">示例代码</span>
                                    <select class="layui-select language-select" lay-filter="languageSelect">
                                        <option value="javascript">JavaScript</option>
                                        <option value="html">HTML</option>
                                        <option value="css">CSS</option>
                                        <option value="python">Python</option>
                                        <option value="java">Java</option>
                                    </select>
                                </div>
                                <div class="code-actions">
                                    <button class="layui-btn layui-btn-xs layui-btn-primary" id="copyCodeBtn">
                                        <i class="layui-icon layui-icon-file"></i> 复制
                                    </button>
                                    <button class="layui-btn layui-btn-xs layui-btn-primary" id="fullscreenBtn">
                                        <i class="layui-icon layui-icon-screen-full"></i> 全屏
                                    </button>
                                    <button class="layui-btn layui-btn-xs layui-btn-primary" id="downloadBtn">
                                        <i class="layui-icon layui-icon-download-circle"></i> 下载
                                    </button>
                                </div>
                            </div>
                            
                            <div class="code-preview-content">
                                <div class="code-line-numbers" id="lineNumbers"></div>
                                <pre class="code-block"><code class="language-javascript" id="codeContent">// JavaScript 示例代码
function fibonacci(n) {
    if (n <= 1) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// 计算斐波那契数列前10项
const result = [];
for (let i = 0; i < 10; i++) {
    result.push(fibonacci(i));
}

console.log('斐波那契数列前10项:', result);

// ES6 箭头函数版本
const fibonacciArrow = (n) => n <= 1 ? n : fibonacciArrow(n - 1) + fibonacciArrow(n - 2);

// 使用Map优化的版本
const fibonacciMemo = (() => {
    const memo = new Map();
    return function fib(n) {
        if (memo.has(n)) return memo.get(n);
        if (n <= 1) return n;
        const result = fib(n - 1) + fib(n - 2);
        memo.set(n, result);
        return result;
    };
})();</code></pre>
                            </div>
                        </div>

                        <!-- 多个代码示例 -->
                        <div style="margin-top: 30px;">
                            <div class="layui-tab layui-tab-brief" lay-filter="codeExamples">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">JavaScript</li>
                                    <li>HTML</li>
                                    <li>CSS</li>
                                    <li>Python</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div class="code-preview-mini" data-language="javascript">
                                            <div class="code-preview-mini-header">
                                                <span>JavaScript 异步处理</span>
                                                <button class="copy-btn layui-btn layui-btn-xs layui-btn-primary">复制</button>
                                            </div>
                                            <pre><code class="language-javascript">// Promise 和 async/await 示例
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        return userData;
    } catch (error) {
        console.error('获取用户数据失败:', error);
        throw error;
    }
}

// 使用示例
fetchUserData(123)
    .then(user => console.log('用户信息:', user))
    .catch(error => console.error('错误:', error));</code></pre>
                                        </div>
                                    </div>
                                    
                                    <div class="layui-tab-item">
                                        <div class="code-preview-mini" data-language="html">
                                            <div class="code-preview-mini-header">
                                                <span>HTML 表单结构</span>
                                                <button class="copy-btn layui-btn layui-btn-xs layui-btn-primary">复制</button>
                                            </div>
                                            <pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;用户注册表单&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form class="layui-form" action="/register" method="post"&gt;
        &lt;div class="layui-form-item"&gt;
            &lt;label class="layui-form-label"&gt;用户名&lt;/label&gt;
            &lt;div class="layui-input-block"&gt;
                &lt;input type="text" name="username" required lay-verify="required" 
                       placeholder="请输入用户名" class="layui-input"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class="layui-form-item"&gt;
            &lt;label class="layui-form-label"&gt;邮箱&lt;/label&gt;
            &lt;div class="layui-input-block"&gt;
                &lt;input type="email" name="email" required lay-verify="email" 
                       placeholder="请输入邮箱" class="layui-input"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class="layui-form-item"&gt;
            &lt;div class="layui-input-block"&gt;
                &lt;button class="layui-btn" lay-submit&gt;立即提交&lt;/button&gt;
                &lt;button type="reset" class="layui-btn layui-btn-primary"&gt;重置&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                                        </div>
                                    </div>
                                    
                                    <div class="layui-tab-item">
                                        <div class="code-preview-mini" data-language="css">
                                            <div class="code-preview-mini-header">
                                                <span>CSS 动画效果</span>
                                                <button class="copy-btn layui-btn layui-btn-xs layui-btn-primary">复制</button>
                                            </div>
                                            <pre><code class="language-css">/* 卡片悬浮效果 */
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 加载动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #409eff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 渐变背景 */
.gradient-bg {
    background: linear-gradient(135deg, 
        #667eea 0%, #764ba2 100%);
}</code></pre>
                                        </div>
                                    </div>
                                    
                                    <div class="layui-tab-item">
                                        <div class="code-preview-mini" data-language="python">
                                            <div class="code-preview-mini-header">
                                                <span>Python 数据处理</span>
                                                <button class="copy-btn layui-btn layui-btn-xs layui-btn-primary">复制</button>
                                            </div>
                                            <pre><code class="language-python"># Python 数据分析示例
import pandas as pd
import numpy as np
from datetime import datetime

# 创建示例数据
data = {
    'name': ['张三', '李四', '王五', '赵六'],
    'age': [25, 30, 35, 28],
    'salary': [8000, 12000, 15000, 9500],
    'department': ['开发部', '产品部', '开发部', '测试部']
}

df = pd.DataFrame(data)

# 数据统计
print("基本统计信息:")
print(df.describe())

# 按部门分组统计
dept_stats = df.groupby('department').agg({
    'salary': ['mean', 'max', 'min'],
    'age': 'mean'
})

print("\n部门统计:")
print(dept_stats)

# 数据过滤
high_salary = df[df['salary'] > 10000]
print(f"\n高薪员工({len(high_salary)}人):")
print(high_salary[['name', 'salary']])</code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全屏预览模态框 -->
    <div id="fullscreenModal" class="fullscreen-modal" style="display: none;">
        <div class="fullscreen-content">
            <div class="fullscreen-header">
                <span class="fullscreen-title">代码预览</span>
                <button class="layui-btn layui-btn-primary layui-btn-xs" id="closeFullscreenBtn">
                    <i class="layui-icon layui-icon-close"></i>
                </button>
            </div>
            <div class="fullscreen-body">
                <pre class="fullscreen-code"><code id="fullscreenCodeContent"></code></pre>
            </div>
        </div>
    </div>

    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
</body>
</html>